<template>
  <section class="theme-box" :class="{ 'show-theme': isShow }">
    <div class="theme">
      <div class="theme-title">
        点击切换主题色
      </div>

      <div class="theme-list" @click="switchTheme('blue')">
        <span style="background: #00b0f0;"></span> #00b0f0
      </div>
      <div class="theme-list" @click="switchTheme('green')">
        <span style="background: #00d1b2;"></span> #00d1b2
      </div>
      <div class="theme-list" @click="switchTheme('orange')">
        <span style="background: #f4b976;"></span> #f4b976
      </div>
      <div class="theme-list" @click="switchTheme('pink')">
        <span style="background: #f39894;"></span> #f39894
      </div>
      <div class="theme-list" @click="switchTheme('cyan')">
        <span style="background: #26b6be"></span> #26b6be
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: ['isShow'],
  methods: {
    switchTheme(color) {
      this.$store.dispatch('switch_theme', color);
    }
  }
};
</script>

<style lang="scss" scoped>
.theme-box {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #f8f8f8;
  padding: 6em 3.3em 0 1.2em;
  transform: translateX(-250px);
  transition: transform .3s;
  &.show-theme {
    transform: translateX(0);
  }
  
  .theme  {
    * + * {
      margin-top: 1em;
    }
    
    .theme-title {
      font-size: 1.2rem;
    }

    .theme-list {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: .5em;
      background-color: #fff;
      width: 7em;
      border-radius: .2em;
      border: 1px solid #aaa;

     

      span {
        // display: inline-block;
        width: 1.2em;
        height: 1.2em;
      }
    }
  }
}
</style>